<!--
 * @Descripttion: tab切换控件（联动列表）
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-16 17:36:23
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-24 10:52:03
-->
<template>
  <ul class="tabs-box">
    <li
      v-for="(item, index) in tabsList1"
      :key="index"
      class="tab-item"
      :class="{active: index === nowItem}"
      @click="changeItems(index)"
    >
      {{ item }}
    </li>
  </ul>
  <div class="tab-content">
    <template v-if="nowItem === 0">
      <div>用户管理</div>
    </template>
    <template v-if="nowItem === 1">
      <div>配置管理</div>
    </template>
    <template v-if="nowItem === 2">
      <div>角色管理</div>
    </template>
    <template v-if="nowItem === 3">
      <div>定时任务补偿</div>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
export default defineComponent({
  props: {
    tabsList1: {
      type: Array,
      default: () => [
        '用户管理',
        '配置管理',
        '角色管理',
        '定时任务补偿'
      ]
    }
  },
  setup() {
    const nowItem = ref(-1)
    const methods = reactive({
      changeItems(index: number) {
        nowItem.value = index
      }
    })

    return {
      nowItem,
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="scss" scoped>
.tabs-box {
  display: flex;
  border-bottom: 3px solid #152887;
  .tab-item {
    list-style-type: none;
    padding: 8px 12px;
    color: #333333;
  }
  .active {
    background-color: #152887;
    color: #fff;
    border-radius: 3px 3px 0 0;
  }
}
</style>
